<template>
  <view class="content">
    <van-nav-bar title="上热搜" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="hot"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <view class="hot-img">
        <image class="img-box" style="width: 100%" src="https://images.tongzhuangkc.com/tz/hot-img.png" />
      </view>
      <view class="hot-box">
        <view class="hot-text">抢占买家注意力，灵活推荐<br />每天5000+搜索，优质展现</view>
        <image
          class="img-box"
          style="width: 686rpx; height: 700rpx; margin: 0 auto"
          src="https://images.tongzhuangkc.com/tz/hot1.png"
        />
        <view class="hot-title">
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/hot-title.png" />
        </view>
        <image
          class="img-box"
          style="width: 686rpx; height: 604rpx; margin: 0 auto"
          src="https://images.tongzhuangkc.com/tz/hot2.png"
        />
      </view>
    </view>
    <view class="hot-opt">
      <view class="opt-btn" @click="goPage">选择货源，上热搜<text></text></view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const state = reactive({
      HeadNavHeight: 0,
      safeAreaTop: 0,
      safeAreaBot: 0,
    })
    const getHeadHeight = (data) => {
      state.HeadNavHeight = 2 * data
    }
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    onMounted(() => {
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    const goPage = () => {
      uni.navigateTo({
        url: `/subpackage-user/publish/index`,
      })
    }
    return {
      ...toRefs(state),
      getHeadHeight,
      onClickLeft,
      goPage,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.hot {
  height: calc(100vh - 230rpx);
  overflow-y: auto;
  text-align: center;
}
.hot-img {
  height: 240rpx;
  .img-box {
    height: 100%;
  }
}
.hot-text {
  color: #000;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 50rpx;
  text-align: center;
  margin: 64rpx 0 32rpx;
}
.hot-title {
  margin: 64rpx 0 32rpx;
  height: 48rpx;
  text-align: center;
  .img-box {
    width: 300rpx;
    height: 48rpx;
  }
}
.hot-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 686rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #ff92a0 0%, #ee4765 100%);
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 83, 111, 0.3);
    border-radius: 40rpx;
    color: #fff;
    font-size: 28rpx;
    text {
      display: inline-block;
      margin-left: 20rpx;
      width: 32rpx;
      height: 32rpx;
      background: url('https://images.tongzhuangkc.com/tz/icon-right1.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
